<!DOCTYPE html>
<html>
  <head>
  	<div th:include="base-libs :: base-libs" />
  	<script th:src="'/quickJs/scripts/easyui/1.5.2/plugins/datagrid-emptyview.js'"></script>
    <title>历史服务详情</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <style>
    	.title{
			height:35px;
			line-height:35px;
			font-size:15px;
			padding-left:8px;
			background:#F7F9FB;
			margin-left:0;
			font-weight:bold
		}
		.spanBtn{
			font-weight: bold;
	    	color: blue;
	    	cursor:pointer;
		}
		.tabs-wrap>.tabs>li>a{
			border-left:1px solid #438EB9!important;
			border-right:1px solid #438EB9!important;
			border-top:1px solid #438EB9!important;
		}
    </style>
	<script>
		var qyDataParent = StoreCache.getCache("qyData");
		var qyData;
		$(function(){
			initView();
		})
		
		function initView(){
			viewMethod.historyTable();
			viewMethod.ywcfwTable();
			$('#tabs').tabs({
				border: true,
			    fit: true,
			    tabWidth: "150",
				onSelect: function(title,index){
					var nowSelectTab = $(this).tabs('getTab',index); //获取到当前激活的tab
					var tableId = nowSelectTab.find("table").attr("id");
					if(!StringUtils.isEmpty(tableId)){
						viewMethod[tableId](); //初始化table
					}
				}
			})
			
			//返回
			var backUrl = StoreCache.removeCache("backUrl"); 
			$("#forback").click(function(){
				StoreCache.setCache("qyData", qyDataParent);
				StoreCache.setCache("backUrl",backUrl);
				$.QuickUrlUtils.redirectUrl("ckfw.html");
			})
		}
		
		/** 查看详细  */
		function detail(row){
			qyData = row;
			var nowSelectTab = $('#tabs').tabs('getSelected');
			var index = $('#tabs').tabs('getTabIndex',nowSelectTab);
			
			var tableObj = {'0':'ywcfwTable','1':'dwcfwTable','2':'dfpfwTable'};
			
			viewMethod[tableObj[index]]();

            //查询标签页统计数目
            $.QuickRemote.AjaxJson(contextRoot + "wdqyhz/queryCountInCkfw", function(result){
                $("#YWCFWCS").html(result.YWCFWCS || 0);
                $("#DWCFWCS").html(result.DWCFWCS || 0);
                $("#DFPFWCS").html(result.DFPFWCS || 0);
            }, {QYXXID: qyData.QYXXID});
		}
		
		
		/** 初始化视图的方法  */
		var viewMethod = {
				historyTable: function(){
					$("#historyTable").datagrid({
						idField : "QYXXID",
						striped : true,
						clickToSelect: true,
						fitColumns: true,
						fit:true,
						scrollbarSize:0,
						singleSelect: true,
						view: emptyView,
						emptyMsg: '暂无历史数据',
						columns : [[
								{field : "QYSJ",title : "签约时间",width:38, align:'center',formatter:function(value){
                                    if(!StringUtils.isEmpty(value)){
                                        return value.substring(	0,10);
                                    }
                                }},
								{field : "QYJG",title : "签约机构",width:60, align:'center'},
								{field : "QYTD",title : "签约团队",width:60, align:'center'},
								{field : "QYFWB",title : "签约服务包",width:120, align:'center'},
								{field : "QYLX",title : "签约状态",width:60, align:'center',formatter: function(value){
									var qylxObj = {'01':'已签约','02':'转介中','03':'已解约','04':'已到期'};
									return qylxObj[value];
								}},
								{field : "cz",title : "操作",width:60, align:'center',formatter: function(value,row){
									row = JSON.stringify(row).replace(/"/g, '&quot;'); 
									return '<span class="spanBtn" onclick="detail(' + row + ')">查看详细</span>';
								}},
						]],
						method : "post",
						url: contextRoot + 'jtqy/querySingleUserQyxxAll.service',
						onBeforeLoad : function(params) {
							params.JMXXID = qyDataParent.JMXXID;
							params.qylxIn = "03,04"; //查询的签约类型
						},
						onLoadSuccess: function(data){
							//alert(JSON.stringify(data))
		 					qyData = data.rows[0];
		 					$('.spanBtn:first').trigger("click"); //默认加载第一个条记录
		 				}
					});
				},
				ywcfwTable: function(){
					//已完成服务
					$("#ywcfwTable").datagrid({
						idField : "FWID",
						striped : true,
						clickToSelect: true,
						fitColumns: true,
						fit:true,
						scrollbarSize:0,
						columns : [[
								{field : "SJFWSJ",title : "服务时间",width:30, align:'center',formatter:function(value){
                                    if(!StringUtils.isEmpty(value)){
                                        return value.substring(	0,10);
                                    }
                                }},
								{field : "FWMC",title : "服务项名称",width:60, align:'center'},
								{field : "FWNR",title : "服务项内容",width:60, align:'center'},
								{field : "FWRY",title : "服务人员",width:120, align:'center'},
								{field : "BZ",title : "备注",width:60, align:'center'},
						]],
						pagination : true,
						pageList: [10, 20, 50, 100, 200],
						method : "post",
						url: contextRoot + 'wdqyhz/queryYfpfwxByPage.service',
						onBeforeLoad : function(params) {
							if(qyData){
								params.QYXXID = qyData.QYXXID;
								params.FWZT= 1; //查询已完成
							}else{
								return false;
							}
						},
						onLoadSuccess: function(data){
	//	 					alert(JSON.stringify(data))
		 				}
					});
				},
				dwcfwTable: function(){
					//待完成服务
					$("#dwcfwTable").datagrid({
						idField : "FWID",
						striped : true,
						clickToSelect: true,
						fitColumns: true,
						fit:true,
						scrollbarSize:0,
						columns : [[
								{field : "YQFWSJ",title : "预期服务时间",width:30, align:'center',formatter:function(value){
                                    if(!StringUtils.isEmpty(value)){
                                        return value.substring(	0,10);
                                    }
                                }},
								{field : "FWMC",title : "服务项名称",width:60, align:'center'},
								{field : "FWNR",title : "服务项内容",width:60, align:'center'},
								{field : "FWRY",title : "服务人员",width:120, align:'center'},
								{field : "BZ",title : "备注",width:60, align:'center'},
						]],
						pagination : true,
						pageList: [10, 20, 50, 100, 200],
						method : "post",
						url: contextRoot + 'wdqyhz/queryYfpfwxByPage.service',
						onBeforeLoad : function(params) {
							if(qyData){
								params.QYXXID = qyData.QYXXID;
								params.FWZT= 0; //查询待完成
							}else{
								return false;
							}
						},
						onLoadSuccess: function(data){
	//	 					alert(JSON.stringify(data))
		 				}
					});
				},
				dfpfwTable: function(){
					//待分配服务
					$("#dfpfwTable").datagrid({
						idField : "QYXXID",
						striped : true,
						clickToSelect: true,
						fitColumns: true,
						fit:true,
						scrollbarSize:0,
						singleSelect:true,
						columns : [[
								{field : "FWMC",title : "服务项名称",width:30, align:'center'},
								{field : "FWNR",title : "服务项内容",width:60, align:'center'},
								{field : "FWPC",title : "服务频次",width:60, align:'center'},
								{field : "DFPFW",title : "待分配服务(次数)",width:60, align:'center',formatter: function(value,row){
									return parseInt(row.FWPC || 0)-parseInt(row.YFPCS || 0) || '无限';
								}},
						]],
						pagination : true,
						pageList: [10, 20, 50, 100, 200],
						method : "post",
						url: contextRoot + 'wdqyhz/queryFwxxByQyxxids.service',
						onBeforeLoad : function(params) {
							if(qyData){
								params.QYXXIDS = qyData.QYXXID;
							}else{
								return false;
							}
						},
						onLoadSuccess: function(data){
	//	 					alert(JSON.stringify(data))
		 				}
					});
				},
		}
	</script>
  </head>
  
  <body class="easyui-layout">
    <div region="north" style="height:268px;overflow:hidden">
    	<div class="title" style="border-bottom:1px solid #ccc;height:35px">
 			<span>历史服务详情</span>
		</div>
		<div style="height:230px;">
			<table id="historyTable" fit="true" border="false"></table>
		</div>
    </div>
    <div region="center" border="false">
    	<div id="tabs" class="easyui-tabs" fit="true" border="false" style="position:relative">
			<div title="已完成服务(<span style='color:red' id='YWCFWCS'>0</span>)" border="false">
				<table id="ywcfwTable" border="false"></table>
			</div>
			<div title="待完成服务(<span style='color:red' id='DWCFWCS'>0</span>)" border="false">
				<table id="dwcfwTable" border="false"></table>
			</div>
			<div title="待分配服务(<span style='color:red' id='DFPFWCS'>0</span>)" border="false">
				<table id="dfpfwTable" border="false"></table>
			</div>
		</div>
    </div>
    <div region="south" style="height:40px;line-height:40px;text-align:center;overflow:hidden;">
		<button type="button" id="forback">返回</button>
	</div>
  </body>
</html>
